<template>
	<view>
		<scroll-view scroll-y="true">
			<view class="g-mn">
				<!-- 定位 -->
				<view class="m-location f-zfs30">
					<text>所在社区：</text>
					<text class="u-location-name">奥园广场奥园广场 [切换]</text>
				</view>

				<!-- 导航菜单 -->
				<view class="m-nav">
					<view class="u-nav-itm" @click="toWeixin">
						<view class="u-nav-t">
							<image class="u-nav-t-img" src="../../static/icon/gong.png"></image>
						</view>
						<view class="u-nav-b">
							<view class="u-menu-txt">关注公众号</view>
						</view>
					</view>
					<view class="u-nav-itm" @click="getCallPhone">
						<view class="u-nav-t">
							<image class="u-nav-t-img" src="../../static/icon/callp.png"></image>
						</view>
						<view class="u-nav-b">
							<view class="u-menu-txt">一键报警</view>
						</view>
					</view>
					<view class="u-nav-itm" @click="toVisitorCode">
						<view class="u-nav-t">
							<image class="u-nav-t-img" src="../../static/icon/visitor.png"></image>
						</view>
						<view class="u-nav-b">
							<view class="u-menu-txt">访客码</view>
						</view>
					</view>
					<view class="u-nav-itm" @click="toRecruitment">
						<view class="u-nav-t">
							<image class="u-nav-t-img" src="../../static/icon/job.png"></image>
						</view>
						<view class="u-nav-b">
							<view class="u-menu-txt">人才招聘</view>
						</view>
					</view>
					<view class="u-nav-itm" @click="toRenting">
						<view class="u-nav-t">
							<image class="u-nav-t-img" src="../../static/icon/rent-info.png"></image>
						</view>
						<view class="u-nav-b">
							<view class="u-menu-txt">租房信息</view>
						</view>
					</view>
					<view class="u-nav-itm" @click="toStore">
						<view class="u-nav-t">
							<image class="u-nav-t-img" src="../../static/icon/shop.png"></image>
						</view>
						<view class="u-nav-b">
							<view class="u-menu-txt">智慧商店</view>
						</view>
					</view>
				</view>


				<!-- 轮播图 -->
				<swiper class="m-swiper s-mbg" :indicator-dots="false" :autoplay="true" :interval="5000"
					:duration="1000">
					<swiper-item v-for="(item, index) in bannerList" :key="index">
						<image class="u-swiper-img" :lazy-load="true" :src="item.href" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				<view class="m-news" v-for="(item, index) in informationTypeList" :key="index">
					<view class="m-news-type">
						<view class="u-type-title f-fw800 f-zfs34">{{item.title}}</view>
						<view class="u-more f-zfs26">更多></view>
					</view>
					<view class="m-list1">
						<view class="u-list1-itm" v-for="(item1, index1) in item.informationList" :key="index1">
							<view class="u-list1-itm-content"  @click="toSocialInformation(item1.id)">
								<view class="u-list1-l">
									<view class="u-list1-l-txt1">{{item1.title}}</view>
									<view class="u-list1-l-txt2">
										{{item1.updated_at}}
									</view>
								</view>
								<view class="u-list1-r">
									<image class="u-list1-r-img" src="../../static/icon/arrow-right.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>

				</view>

			</view>
		</scroll-view>


	</view>
</template>

<script>
	import HOME from '@/api/home/index.js'

	export default {
		data() {
			return {
				bannerList: null,
				informationTypeList: []
			}
		},
		mounted() {
			this.getBanner();
			this.getInfoType()
		},
		methods: {
			// 获取轮播图
			getBanner() {
				HOME.banner(1, 10).then(res => {
					this.bannerList = res.data.data;
				})
			},
			getInfoType() {
				var self = this;
				HOME.infoType(1, 100, 0).then(res => {
					// 使用递归方式进行同步
					var i = 0;
					recursiveJudge();

					function recursiveJudge() {
						if (i >= res.data.data.length) {
							self.$nextTick(function() {
								self.informationTypeList = res.data.data;
							})
							return;
						}
						res.data.data[i].informationList = [];
						HOME.getDocument(1, 10, 0, res.data.data[i].id).then(res1 => {
							if (res1.data.data.length != 0) {
								res.data.data[i].informationList = res1.data.data;
							} else {
								var bb = [{
									title: '无消息内容'
								}]
								res.data.data[i].informationList = bb;
							}
							i++;
							recursiveJudge();
						});

					}
				});


			},

			// 资讯详情
			toSocialInformation(val) {
				var self = this;
				uni.navigateTo({
					url: '/pages/home/socialInformation/index?id=' + val
				})
			},
			
			// 关注公众号
			toWeixin() {
				uni.navigateTo({
					url: '/pages/home/weixin/index'
				})
			},
			// 一键报警
			getCallPhone() {
				uni.makePhoneCall({
					phoneNumber: '12345'
				})
			},
			// 设置访客码
			toVisitorCode() {
				uni.navigateTo({
					url: '/pages/home/visitorCode/index'
				})
			},
			// 人才招聘
			toRecruitment() {
				uni.navigateTo({
					url: '/pages/home/recruitment/index'
				})
			},
			// 租房信息
			toRenting() {
				uni.navigateTo({
					url: '/pages/home/renting/index'
				})
			},
			// 智慧商店
			toStore() {
				uni.navigateTo({
					url: '/pages/home/wisdom/index'
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.g-mn {
		.m-location {
			display: flex;
			align-items: center;
			padding: 30rpx;
			box-shadow: 0px 0rpx 5rpx #ccc;
		}

		.m-swiper {
			position: relative;
			box-sizing: border-box;
			width: 690rpx;
			height: calc(690rpx * 0.5625);
			margin: 30rpx;
			overflow: hidden;
			border-radius: 20rpx;

			.u-swiper-img {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}

		.m-news {
			margin: 30rpx 0;

			.m-news-type {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 30rpx;

				.u-more {
					color: #999;
				}
			}
		}


	}

	// .container {
	// 	padding: 0 20rpx;

	// 	.location {
	// 		display: flex;
	// 		align-items: center;
	// 		font-size: 30rpx;
	// 		color: #FFFFFF;

	// 		.location-name {
	// 			padding: 0 8rpx;
	// 		}
	// 	}

	// 	.swiper {
	// 		position: relative;
	// 		max-width: 710rpx;
	// 		height: 399rpx;
	// 		margin: 20rpx 0;
	// 		border-radius: 30rpx;
	// 		overflow: hidden;

	// 		.swiper-image {
	// 			position: absolute;
	// 			top: 0;
	// 			left: 0;
	// 			right: 0;
	// 			bottom: 0;
	// 			width: 100%;
	// 			height: 100%;
	// 		}
	// 	}

	// 	/* 菜单操作 */
	// 	.nav {
	// 		max-width: 750rpx;
	// 		margin: 40rpx auto;
	// 		// padding: 0 20rpx;
	// 		background-color: #ffffff;

	// 		.menu {
	// 			display: flex;
	// 			flex-flow: row wrap;
	// 			border-radius: 30rpx;
	// 			box-shadow: 0px 10rpx 20rpx #ccc;

	// 			.menu-item {
	// 				display: flex;
	// 				flex-direction: column;
	// 				align-items: center;
	// 				width: 33%;
	// 				margin: 20rpx 0;

	// 				.menu-item-bg {
	// 					display: flex;
	// 					align-items: center;
	// 					justify-content: center;
	// 					width: 70rpx;
	// 					height: 70rpx;
	// 					margin-bottom: 10rpx;
	// 					border-radius: 50%;
	// 				}

	// 				.menu-item-image {
	// 					width: 50rpx;
	// 					height: 50rpx;
	// 				}

	// 				.menu-item-label {
	// 					font-size: 28rpx;
	// 				}
	// 			}
	// 		}
	// 	}

	// 	/* 资讯 */
	// 	.segmentation {
	// 		margin: 20rpx 0;

	// 		.segmentation-content {
	// 			width: 100%;
	// 			height: 80rpx;
	// 			display: flex;
	// 			align-items: center;
	// 			justify-content: space-around;
	// 			border-radius: 40rpx;
	// 			background-image: linear-gradient(to bottom right, #2a9f93, #2c6975);

	// 			.title {
	// 				font-size: 30rpx;
	// 				color: #ffffff;
	// 			}

	// 			image {
	// 				width: 20rpx;
	// 				height: 20rpx;
	// 			}
	// 		}

	// 		.information {
	// 			display: flex;
	// 			flex-direction: column;
	// 			max-width: 750rpx;
	// 			margin: 20rpx 0;
	// 			padding: 10rpx;
	// 			box-shadow: 0px 10rpx 20rpx #ccc;
	// 			border-radius: 40rpx;
	// 			background-color: #ffffff;

	// 			.information-header {
	// 				display: flex;
	// 				align-items: center;
	// 				justify-content: space-between;
	// 				max-width: 750rpx;
	// 				padding: 10rpx;

	// 				.information-header-title {
	// 					font-size: 40rpx;
	// 					font-weight: 800;
	// 				}

	// 				.information-header-more {
	// 					font-size: 24rpx;
	// 					color: #999;
	// 				}
	// 			}

	// 			.information-content {
	// 				border-radius: 30rpx;

	// 				.information-list {
	// 					display: flex;
	// 					flex-direction: column;
	// 					border-top: 1px solid #ccc;

	// 					.information-list-item {
	// 						display: flex;
	// 						align-items: center;
	// 						justify-content: space-between;
	// 						padding: 20rpx;
	// 						border-bottom: 1px solid #ccc;

	// 						.information-list-item-title {
	// 							width: 600rpx;
	// 							text-overflow: ellipsis;
	// 							white-space: nowrap;
	// 							overflow: hidden;
	// 							font-size: 28rpx;
	// 						}

	// 						.information-list-item-date {
	// 							width: 150rpx;
	// 							font-size: 26rpx;
	// 						}

	// 						image {
	// 							width: 40rpx;
	// 							height: 40rpx;
	// 						}
	// 					}
	// 				}
	// 			}
	// 		}
	// 	}
	// }
</style>
